<template>
	<view class="contain">
		<Home></Home>
		<view class="food_rank">美食排行</view>
		<view>
			<!-- <view v-for="(item,index) in position" :key="index" @click="toDetailRank(item)">{{item}}</view> -->
			
			<view class="flex solid-bottom padding justify-center">
				<view>点击选择餐厅：</view>
				<view >
					<picker @change="bindPickerChange" :value="index" :range="position">
						<view class="uni-input">{{position[index]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<List :collection="Tweets"></List>
	</view>
</template>

<script>
	import Home from '@/components/Home.vue'
	import List from '@/components/List.vue'
	export default {
		components: {
			Home,
			List
		},
		data() {
			return {
				Tweets: "Tweets",
				index: 0,
				position: [
					"总榜",
					"华源",
					"南苑",
					"北苑",
					"东苑",
					"校周边"
				]
			};
		},
		methods: {
			// 选择器
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			//跳转至详细排行页面
			toDetailRank(item) {
				//console.log(item)
				let _this = this
				uni.navigateTo({
					url: '/pages/canteen_rank/index',

					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('tar', {
							data: item
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.food_rank {
		margin-top: 10rpx;
		margin-left: 30rpx;
		font-weight: bold;
	}

	.choose {
		float: right;
	}
	.pick {
		
	}
</style>
